<template>
  <div id="patrol-list">
    <van-nav-bar title="巡查列表" left-arrow @click-left="back" fixed />
    <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch">
      <div slot="action" @click="onSearch" style="color:#666">搜索</div>
    </van-search>
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" @change="menuSearch()"/>
      <van-dropdown-item v-model="value2" :options="option2" @change="menuSearch()"/>
      <van-dropdown-item v-model="value3" :options="option3" @change="menuSearch()"/>
    </van-dropdown-menu>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
        <van-cell v-for="item in fileList" :key="item.id" style="position:relative">
          <van-card @click="viewOldDetail(item.id)" style="background:#FFFFFF">
            <span slot="thumb" class="file-img">
              <img v-lazy="item.image" alt v-if="item.image"/>
              <img v-lazy="defultImg" alt v-if="!item.image">
            </span>
            <span slot="desc" class="file-text">
              <div class="file-id">{{item.id}}</div>
              <div class="file-name">
                <span>{{item.username}}</span> | 
                <span>{{item.gender ==1 ? "男" : ( item.gender == 2 ? "女": "不明" )}}</span> | 
                <span>{{item.age}}</span>
              </div>
              <div class="file-tel">电话：{{item.phone}}</div>
              <div class="file-address">住址：{{item.community}} {{item.neighborhood}} {{item.building}} {{item.unit}}</div>
            </span>
          </van-card>
          <van-button
            size="mini"
            class="patrol-style"
            @click="patrolClick(item)"
            v-if="item.isRecord == 1 "
          >巡查</van-button>
          <van-button
            size="mini"
            class="patrol-style"
            @click="editClick(item)"
            v-if="item.isRecord == 2"
          >修改</van-button>
        </van-cell>
      </van-pull-refresh>
    </van-list>
  </div>
</template>
<script>
import api from "@/controller/agedService.js";
import constant from "@/controller/constant.js";
export default {
  name: "patrolList",
  data() {
    return {
      value: "",
      value1: "",
      value2: "",
      value3: "",
      loading: false,
      finished: false,
      isLoading: false,
      fileList: [],
      option1: [
        {
          text: '全部',
          value: ""
        }
      ],
      option2: [
        {
          text: '全部',
          value: ""
        }
      ],
      option3: [
        {
          text: '全部',
          value: ""
        }
      ],
      pageSize: 10,
      curPage: 1,
      defultImg: require("@/icons/img/head.png"),
    };
  },
  watch: {},
  mounted() {
    this.getAddress();
    this.getFileList()
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    menuSearch() {
      this.onSearch()
    },
    getFileList() {
      const data = {
        "code": this.value,
        "curPage": this.curPage,
        "idcardNo": this.value,
        "inspectorId": 0,
        "pageSize": this.pageSize,
        "phone": this.value,
        "startIndex": 0,
        "totalCount": 0,
        "username": this.value,
        "building": this.value2,
        "neighborhood": this.value1,
        "unit": this.value3
      }
      const _self = this
      api 
      .pensionCare_v1_searchFront(data) 
      .then(res => {
        if(res.code == 0) {
          if(
              res.datas ==  null ||
              res.datas.records == null ||
              res.datas.records.length === 0
              ) {
            // _self.$toast('暂无更多数据')
            _self.loading = false
            _self.isLoading = false
            _self.finished = true
            return
          }
          this.$nextTick(() => {
            _self.loading = false
            _self.isLoading = false
          })
          if (res.datas.records.length < this.pageSize) {
            _self.finished = true
          } 
           
            _self.fileList = [..._self.fileList, ...res.datas.records]
        }
      })
      .catch(() =>{
        this.$toast(constant.netErrMsg);
      }) 
    },
    onSearch() {
     this.fileList = []
      this.curPage = 1
      // debugger
      this.finished = false
      this.getFileList()
    },
    viewOldDetail(val) {
      this.$router.push({
        path: "/work/oldAgeFileDetail",
        query: { viewId: val }
      });
    },
    patrolClick(val) {
      this.$router.push({
        path: "/work/patrolFeedback",
        query: { id: val.id}
      });
    },
    editClick(val) {
      this.$router.push({ path: "/work/editFeedback", query: { id: val.id } });
    },
    onRefresh() {
      setTimeout(() => {
        this.isLoading =  false
        this.curPage += 1
        this.getFileList()
      },500)
    },
    onLoad() {
      this.isLoading = false
      this.onRefresh();
    },
    getAddress() {
      api
      .pensionCare_v1_lsit_neighborhood()
      .then(res => {
        res.datas.forEach(val => {
          for(let key in val) {
            if(key == 'neighborhood') {
              this.option1.push({text: val[key], value: val[key]})
            }
            else if(key == 'building') {
              this.option2.push({text:val[key], value: val[key]}); 
            }
            else if(key == 'unit') {
              this.option3.push({text: val[key], value: val[key]})
            }
          } 
        })
        var obj1 = {};
        var obj2 = {};
        var obj3 = {};
        this.option2 = this.option2.reduce(function(item, next) {
          obj1[next.value] ? '' : obj1[next.value] = true && item.push(next);
          return item;
        }, []);
        this.option3 = this.option3.reduce(function(item, next) {
          obj2[next.value] ? '' : obj2[next.value] = true && item.push(next);
          return item;
        }, []);
        this.option1 = this.option1.reduce(function(item, next) {
          obj3[next.value] ? '' : obj3[next.value] = true && item.push(next);
          return item;
        }, []);
      })
      .catch(() => {
        this.$toast(constant.netErrMsg)
      })
    },
    getPatrolList() {
      const _self = this
      const data = {
        "curPage": this.curPage,
        "pageSize": this.pageSize
      };
      api 
      .pensionRecord_v1_list_frontEnd(data)
      .then(res => {
        if(res.code == 0) {
          const rows = res.datas.records
          if((res.datas && res.datas.records.length === 0) ||
                res.datas === null) {
            _self.$toast('暂无更多数据')
            _self.loading = false
            _self.isLoading = false
            _self.finished = true
            return
          }
          this.$nextTick(() => {
            _self.loading = false
            _self.isLoading = false
          })
          if (rows.length < this.pageSize) {
            _self.finished = true
          } 
          _self.fileList = [..._self.fileList, ...rows]
        }
      })
      .catch(() => {
        this.$toast(constant.unusualMsg);
      })
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../styles/searchStyle.scss";
</style>
<style lang="scss">
#patrol-list {
  .van-dropdown-menu {
    border-bottom: 0.5px solid #e2e2e2;
  }
  .van-dropdown-menu__title--active,
  .van-dropdown-item__option--active {
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: #dc4630;
    letter-spacing: 0;
  }
  .van-dropdown-item__option--active,
  .van-dropdown-item__option--active .van-dropdown-item__icon {
    color: #dc4630;
  }
  .van-cell {
    padding: 0;
  }
  .van-cell {
    padding: 0;
  }
  .van-card {
    padding: 20px;
    border-bottom: 0.5px solid #e2e2e2;
    .van-card__thumb {
      width: 50px;
      height: 50px;
    }
  }
  .file-img {
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: top;
    img {
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }
  }
  .van-list {
    min-height: calc(100vh - 149px);
    background: #ffffff;
  }
  .file-text {
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;
    .file-id {
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #333333;
      letter-spacing: 0;
      font-weight: bolder;
      line-height: 22.5px;
    }
    .file-name,
    .file-tel,
    .file-address {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #666666;
      letter-spacing: 0;
      line-height: 20px;
      margin-top: 5px;
    }
  }
  .patrol-style {
    position: absolute;
    top: 15px;
    right: 15px;
  }
  .van-button {
    background: #dc4630;
    border-radius: 2px;
    width: 60px;
    height: 26px;
    .van-button__text {
      font-family: PingFangSC-Medium;
      font-size: 13px;
      color: #ffffff;
      letter-spacing: 0;
      text-align: center;
      line-height: 18.5px;
    }
  }
  .van-cell:not(:last-child)::after,
  .van-hairline--top-bottom::after,
  .van-hairline-unset--top-bottom::after {
    border: none;
  }
}
</style>